<template>
  <div class="search-store">
    <div class="mescroll"  ref="mescroll">
      <div class="top">
        <div class="div-input">
          <img src="@/assets/mdsy04.png" alt="">
          <img src="@/assets/mdss02.png" v-if="search_con.length>0" @click="clear" class="cha" alt="">
          <input type="text" v-model="search_con" placeholder="搜索会员名称或绑定手机号">
        </div>
        <span class="search-btn" @click="search()">搜索</span>
      </div>
      <span class="all-person">全部会员 {{count}}人</span>
      <div class="list" v-if="lists && lists.length>0">
        <div v-for="(item,index) in lists" :key="index" class="item" @click="router({path: './personDetails',query: {id: item.uid}})">
          <img :src="item.head_pic" class="head-img" alt="">
          <div class="name-con">
            <p class="name">{{item.nickname}}(总剩{{item.remain}}次）</p>
            <p class="phone">{{item.mobile}}</p>
          </div>
        </div>
      </div>
      <div class="border-top none" v-show="noDate">
        <img src="@/assets/tykt01.png" class="result-none" alt="">
        <p>暂无相关结果</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {personlist} from '@/api/api'
  import MeScroll from 'mescroll.js'
  import 'mescroll.js/mescroll.min.css'
  export default {
    components: {
    },
    data () {
      return {
        listLength: ['1'],
        search_con: '',
        lists:[],
        count:0,
        mescroll: null, //mescroll实例对象
        noDate: false,
      }
    },
    created () {
    },
    mounted () {
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      clear () {
        this.search_con = ''
      },
      search(){
          this.lists=[]
          this.mescroll.resetUpScroll()
      },
      upCallback (page) {      
        personlist(this.search_con,page.num, page.size).then((res) => {
          console.log(res)
          if (page.num == 1){
            this.lists = []
          }
          if(res.data == null){
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.info.list.length);
          })
          this.count = res.data.info.count
          this.lists = this.lists.concat(res.data.info.list)
          if(this.lists.length == '0'){
            this.noDate = true
          }
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.search-store
  background-color #fff
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    width 100vw
    overflow-x hidden
    .top-img
      float left
    .search
      float left
      width 92%
      margin-left 4%
      text-align center
      background-color #fff
      height 4.5rem
      line-height 4.5rem
      margin-top -2.25rem
      margin-bottom 1rem
      img
        display inline-block
        vertical-align middle
        width 1.6rem
      span
        display inline-block
        vertical-align middle
        font-size 1.3rem
        color #172F6D
        margin-left .5rem
  .all-person
    line-height 4.5rem
    height 4.5rem
    font-size 1.3rem
    color #333
    padding-left 1.5rem
    background-color #f5f5f5
    display block
  .top
    position relative
    height 5rem
    .div-input
      background-color #f5f5f5
      height 3.5rem
      width 80%
      position absolute
      left 1.6rem
      border-radius 100px
      top 1rem
      img
        width 1.6rem
        position absolute
        z-index 9
        top 1rem
        left 1.2rem
      input
        width 100%
        padding-left 3.8rem
        position absolute
        left 0
        line-height 3.5rem
        height 3.5rem
        top 0
        background-color #f5f5f5
        border-radius 100px
        box-sizing border-box
        outline none
        border none 
      .cha
        width 1.5rem
        position absolute
        right 1.5rem
        left auto
    span
      position absolute
      right 1.6rem
      line-height 5rem
      height 5rem
      font-size 1.5rem
  .list
    padding 0 2rem
    background-color #fff
    .item
      padding 1.5rem 0
      border-bottom 1px solid #e6e6e6
      .head-img
        float left
        width 4rem
        margin-right 1.2rem
        height 4rem
        object-fit cover
        border-radius 50%
        overflow hidden
      .name-con
        .name
          color #333333
          font-size 1.5rem
          font-weight 500
          line-height 1.8rem
          margin-bottom .4rem
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
        .phone
          font-size 1.2rem
          line-height 1.8rem
          color #999
          height 1.8rem
  .none
    position relative
    background-color #fff
    min-height calc(100vh - 6rem)
    .result-none
      position absolute
      width 7.25rem
      top 12.6rem
      left 50%
      margin-left -3.6rem
    p
      font-size 1.3rem
      color #666
      position absolute
      width 100%
      text-align center
      top 25.2rem
</style>
